<template>
  <div>
    <TypeNav />
    <!-- 主要内容区域 -->
    <section class="con">
      <!-- 导航路径区域 -->
      <div class="conPoin">
        <div class="conPoin">
          <a v-for="(item, index) in categoryView" :key="index">{{ item }}</a>
        </div>
      </div>
      <!-- 主要内容区域 -->
      <div class="mainCon">
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <Zoom />
          <!--下方的缩略图-->
          <ImageList />
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <div class="goodsDetail">
            <h3 class="InfoName">{{ skuInfo.skuName }}</h3>
            <p class="news">{{ skuInfo.skuName }}</p>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                <div class="price">
                  <i>¥</i><em>{{ price }}</em
                  ><span>降价通知</span>
                </div>
                <div class="remark"><i>累计评价</i><em>183</em></div>
              </div>
              <div class="priceArea2">
                <div class="title"><i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i></div>
                <div class="fixWidth"><i class="red-bg">加价购</i><em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em></div>
              </div>
            </div>
            <div class="support">
              <div class="supportArea">
                <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                <div class="fixWidth">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
              </div>
              <div class="supportArea">
                <div class="title">配 送 至</div>
                <div class="fixWidth">广东省 深圳市 宝安区</div>
              </div>
            </div>
          </div>
          <div class="choose">
            <div class="chooseArea">
              <div class="choosed"></div>
              <dl v-for="item in spuSaleAttrList" :key="item.baseSaleAttrId">
                <dt class="title">{{ item.saleAttrName }}</dt>
                <dd v-for="item2 in item.spuSaleAttrValueList" :key="item2.id" :class="{ active: item2.isChecked === '1' }" @click="changeChecked(item2, item.spuSaleAttrValueList)">{{ item2.saleAttrValueName }}</dd>
              </dl>
            </div>
            <div class="cartWrap">
              <div class="controls">
                <input autocomplete="off" class="itxt" v-model="controls" @change="isNumber" />
                <a href="javascript:" class="plus" @click="controls++">+</a>
                <a href="javascript:" class="mins" @click="controls = controls > 1 ? controls - 1 : 1">-</a>
              </div>
              <div class="add"><a @click="addCart">加入购物车</a></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <ProductDetail />
  </div>
</template>

<script>
import ProductDetail from '@/views/Detail/components/ProductDetail'
import Zoom from '@/views/Detail/components/Zoom'
import ImageList from '@/views/Detail/components/ImageList'
import { mapGetters } from 'vuex'
export default {
  name: 'Detail',
  data() {
    return {
      controls: 1,
    }
  },
  components: {
    ProductDetail,
    Zoom,
    ImageList,
  },
  // 页面加载时mapGetters被调用了两次
  computed: {
    ...mapGetters('detail', ['categoryView', 'price', 'skuInfo', 'spuSaleAttrList']),
  },
  methods: {
    // ...mapMutations('detail', ['GETDETAILGOODS']),
    changeChecked(attr, item) {
      item.forEach((ele) => {
        ele.isChecked = '0'
      })
      attr.isChecked = '1'
    },
    isNumber() {
      var num = this.controls - 0
      if (isNaN(num) || num < 1) {
        this.controls = 1
      } else {
        this.controls = parseInt(num)
      }
    },
    async addCart() {
      this.$store.commit('detail/GETDETAILGOODS', this.goods)
      this.$store.dispatch('detail/postCartList', { skuId: this.goodsId, skuNum: this.controls }).then(() => {
        // 加入购物车
        this.$router.push('/AddCartOk')
      })
    },
  },
  created() {
    // 发起请求报错时路由跳转回上一页
    this.$store.dispatch('detail/getDetailList', this.goodsId).catch(() => {
      this.$router.back()
    })
  },
  props: ['goodsId', 'goods'],
}
</script>

<style lang="scss" scoped>
.con {
  width: 1200px;
  margin: 15px auto 0;
  .conPoin {
    padding: 9px 15px 9px 0;
    & > a + a:before {
      content: '/\00a0';
      padding: 0 5px;
      color: #ccc;
    }
  }
  .mainCon {
    overflow: hidden;
    margin: 5px 0 15px;
    .previewWrap {
      float: left;
      width: 400px;
      position: relative;
    }
    .InfoWrap {
      width: 700px;
      float: right;
      .InfoName {
        font-size: 14px;
        line-height: 21px;
        margin-top: 15px;
      }
      .news {
        color: #e12228;
        margin-top: 15px;
      }
      .priceArea {
        background: #fee9eb;
        padding: 7px;
        margin: 13px 0;
        .priceArea1 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            float: left;
            margin-right: 15px;
          }
          .price {
            float: left;
            color: #c81623;
            i {
              font-size: 16px;
            }
            em {
              font-size: 24px;
              font-weight: 700;
            }
            span {
              font-size: 12px;
            }
          }
          .remark {
            float: right;
          }
        }
        .priceArea2 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            .red-bg {
              background: #c81623;
              color: #fff;
              padding: 3px;
            }
            .t-gray {
              color: #999;
            }
          }
        }
      }
      .support {
        border-bottom: 1px solid #ededed;
        padding-bottom: 5px;
        .supportArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            color: #999;
          }
        }
      }
      .choose {
        .chooseArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .choosed {
            mark {
              height: 30px;
              display: inline-block;
              line-height: 30px;
              background-color: snow;
              border: 1px solid #ddd;
              padding: 0 20px;
              margin-right: 20px;
              a {
                font-size: 12px;
                color: red;
                margin-left: 20px;
                cursor: pointer;
              }
            }
          }
          dl {
            overflow: hidden;
            margin: 13px 0;
            dt {
              margin-right: 15px;
              float: left;
            }
            dd {
              float: left;
              margin-right: 5px;
              color: #666;
              line-height: 24px;
              padding: 2px 14px;
              border-top: 1px solid #eee;
              border-right: 1px solid #bbb;
              border-bottom: 1px solid #bbb;
              border-left: 1px solid #eee;
            }
            .active {
              border: 1px solid red;
              color: red;
            }
          }
        }
        .cartWrap {
          .controls {
            width: 48px;
            position: relative;
            float: left;
            margin-right: 15px;
            .itxt {
              width: 38px;
              height: 37px;
              border: 1px solid #ddd;
              color: #555;
              float: left;
              border-right: 0;
              text-align: center;
            }
            .plus,
            .mins {
              width: 15px;
              text-align: center;
              height: 17px;
              line-height: 17px;
              background: #f1f1f1;
              color: #666;
              position: absolute;
              right: -8px;
              border: 1px solid #ccc;
            }
            .mins {
              right: -8px;
              top: 19px;
              border-top: 0;
            }
            .plus {
              right: -8px;
            }
          }
          .add {
            float: left;
            a {
              background-color: #e1251b;
              padding: 0 25px;
              font-size: 16px;
              color: #fff;
              height: 36px;
              line-height: 36px;
              display: block;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
